<template>
  <div class="shop_wrapper">
    <nav class="top_bg" style="background-image: url('https://cube.elemecdn.com/4/c0/b9509ecfafac5ed46d78bed531159png.png?x-oss-process=image/format,webp/resize,w_750')">
      <a href="javascript:;" class="back" @click="$router.go(-1)"></a>
    </nav>
    <div class="shop_info">
      <div class="shop_img">
        <img src="https://cube.elemecdn.com/9/44/774F509CD43A083DBBE55DDF20034png.png?x-oss-process=image/format,webp/resize,w_150">
      </div>
      <div class="shop_top">
        <h2 @click="openPopups('brief')"><span>牛呆呆·大碗牛肉面(火车站店)</span><i class="iconfont">&#xe60a;</i></h2>
        <div class="shop_attr">
          <span>评价4.5</span>
          <span>月售2855单</span>
          <span>蜂鸟快送约32分钟</span>
        </div>
      </div>
      <div class="shop_coupon" @click="openPopups('coupon')">
        <div class="coupon">
          <p class="con">
            共
            <span class="price"><small>¥</small>8</span>
            <span>店铺</span>
          </p>
          <p class="get">领取</p>
        </div>
      </div>
      <div class="shop_activity" @click="openPopups('activity')">
        <div class="activity_con">
          <div class="activity_tags">22减20</div>
          <div class="activity_tags">60减30</div>
          <div class="activity_tags">津贴1元</div>
          <div class="activity_tags">90减35</div>
        </div>
        <div class="more_activity">7个优惠</div>
      </div>
      <div class="shop_notice">公告：【牛呆呆·大碗牛肉面】，以“呆人匠造”的经营理念，秉承“一生只够做好一碗面”的谦卑心态，打造经典爆品。让更多的人，享受更好的牛肉面。</div>
    </div>
    <div class="shop_tab" :class="{isFixed: isFixed}">
      <ul>
        <li :class='{active: changeShowType =="food"}'>
          <p @click="changeShowType = 'food'">点餐</p>
        </li>
        <li :class='{active: changeShowType =="appraise"}'>
          <p @click="changeShowType = 'appraise'">评价</p>
        </li>
        <li :class='{active: changeShowType =="shop"}'>
          <p @click="changeShowType = 'shop'">商家</p>
        </li>
      </ul>
    </div>
    <transition name="showbrief">
      <div class="shop_brief_info" v-show="showPopups == 'brief'">
        <div class="con">
          <h2 class="name">牛呆呆·大碗牛肉面(火车站店)</h2>
          <ul class="brief_modal">
            <li>
              <h3 class="txt">4.5</h3>
              <p class="title">评分</p>
            </li>
            <li>
              <h3 class="txt">3391单</h3>
              <p class="title">月售</p>
            </li>
            <li>
              <h3 class="txt">蜂鸟快送</h3>
              <p class="title">约30分钟</p>
            </li>
            <li>
              <h3 class="txt">0.0元</h3>
              <p class="title">配送费</p>
            </li>
            <li>
              <h3 class="txt">1.8km</h3>
              <p class="title">距离</p>
            </li>
          </ul>
          <div class="notice">
            <h3><span>公告</span></h3>
            <div class="txt">【牛呆呆·大碗牛肉面】，以“呆人匠造”的经营理念，秉承“一生只够做好一碗面”的谦卑心态，打造经典爆品。让更多的人，享受更好的牛肉面。</div>
          </div>
          <span class="iconfont close" @click="closePopups">&#xe615;</span>
        </div>
      </div>
    </transition>
    <transition name="toggle-cart">
      <div class="coupon_popups" v-if="showPopups == 'coupon'">
        <div class="title">
          <h3>店铺专享红包</h3>
          <span class="iconfont close" @click="closePopups">&#xe615;</span>
        </div>
        <div class="con">
          <dl>
            <dt><h4>可领红包</h4></dt>
            <dd>
              <section class="coupon_item can_get">
                <div class="coupon_left">
                  <div class="price">
                    <p><span>3</span></p>
                  </div>
                  <div class="info">
                    <h3>满¥45可用</h3>
                    <p>限本店使用, 2020-07-31到期</p>
                  </div>
                </div>
                <div class="coupon_right">
                  <div class="info">
                    <a href="javascript:;" class="get_btn">领取</a>
                  </div>
                </div>
              </section>
            </dd>
            <dd>
              <section class="coupon_item can_get">
                <div class="coupon_left">
                  <div class="price">
                    <p><span>5</span></p>
                  </div>
                  <div class="info">
                    <h3>满¥89可用</h3>
                    <p>限本店使用, 2020-08-31到期</p>
                  </div>
                </div>
                <div class="coupon_right">
                  <div class="info">
                    <img src="" alt="已领取">
                  </div>
                </div>
              </section>
            </dd>
          </dl>
          <dl>
            <dt><h4>已有红包</h4></dt>
            <dd>
              <section class="coupon_item">
                <div class="coupon_left">
                  <div class="price">
                    <p><span>3</span></p>
                  </div>
                  <div class="info">
                    <h3>满¥45可用</h3>
                    <p>限本店使用, 2020-07-31到期</p>
                  </div>
                </div>
                <div class="coupon_right">
                  <div class="info">
                  </div>
                </div>
              </section>
            </dd>
            <dd>
              <section class="coupon_item">
                <div class="coupon_left">
                  <div class="price">
                    <p><span>5</span></p>
                  </div>
                  <div class="info">
                    <h3>满¥89可用</h3>
                    <p>限本店使用, 2020-08-31到期</p>
                  </div>
                </div>
                <div class="coupon_right">
                  <div class="info">
                  </div>
                </div>
              </section>
            </dd>
          </dl>
        </div>
      </div>
    </transition>
    <transition name="toggle-cart">
      <div class="coupon_popups activity_popups" v-show="showPopups == 'activity'">
        <div class="title">
          <h3>优惠活动</h3>
          <span class="iconfont close" @click="closePopups">&#xe615;</span>
        </div>
        <div class="con">
          <div class="activity_list">
            <div class="activity_item">
              <div class="tag">满减</div>
              <span class="txt">满22元减20元，满60元减30元，满90元减35元，满100元减40元</span>
            </div>
            <div class="activity_item">
              <div class="tag">津贴</div>
              <span class="txt">满18元可使用津贴1元</span>
            </div>
            <div class="activity_item">
              <div class="tag">配送</div>
              <span class="txt">配送费立减3元</span>
            </div>
            <div class="activity_item">
              <div class="tag">特价</div>
              <span class="txt">特价商口1.79元起</span>
            </div>
            <div class="activity_item">
              <div class="tag">红包</div>
              <span class="txt">下单返2元店铺专享红包</span>
            </div>
            <div class="activity_item">
              <div class="tag">红包</div>
              <span class="txt">进店领8元店铺专享红包</span>
            </div>
            <div class="activity_item">
              <div class="tag">首单</div>
              <span class="txt">饿了么新用户首单立减15元</span>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <transition name="fade-choose">
      <shop-food-list v-show="changeShowType =='food'"></shop-food-list>
    </transition>
    <transition name="fade-choose">
      <shop-Appraise v-show="changeShowType =='appraise'"></shop-Appraise>
    </transition>
    <transition name="fade-choose">
      <shop-Info v-show="changeShowType =='shop'"></shop-Info>
    </transition>
    <transition name="showcover">
      <div class="mask" v-show="open" @click="closePopups"></div>
    </transition>
    <section class="animation_opactiy shop_back_svg_container">
      <img src="@/assets/images/shop_back_svg.svg">
    </section>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import ShopFoodList from './components/FoodList'
import ShopAppraise from './components/Appraise'
import ShopInfo from './components/ShopInfo'
export default {
  name: 'Shop',
  components: {
    ShopFoodList,
    ShopAppraise,
    ShopInfo
  },
  data () {
    return {
      geohash: '', // 食品页传过来的geohash位置信息
      isFixed: false,
      showPopups: '',
      open: false,
      changeShowType: 'food', // 切换显示商品,评价,商家
      showCartList: false, // 显示购物车列表
      shopDetailData: [], // 商铺详情
      menuList: [], // 食品列表
      ratingList: null, // 评价列表
      ratingOffset: 0, // 评价获取数据offset值
      ratingScoresData: null, // 评价总体分数
      ratingTagsList: [] // 评价分类列表
    }
  },
  created () {
    this.geohash = this.$route.query.geohash
    this.shopId = this.$route.query.id
  },
  mounted () {
    this.initData()
    window.addEventListener('scroll', this.watchScroll)
  },
  computed: {
    ...mapState(['latitude', 'longitude'])
  },
  methods: {
    ...mapMutations(['RECORD_ADDRESS']),
    initData () {
      if (!this.latitude) {
        this.$api.home.homeAddress(this.geohash).then(res => {
          this.RECORD_ADDRESS(res.data)
        })
      }
      // 获取商铺信息
      this.$api.home.shopDetails(this.shopId, this.latitude, this.longitude).then(res => {
        console.log(res.data)
        this.shopDetailData = res.data
      })
      // 获取商铺食品列表
      this.$api.home.foodMenu(this.shopId).then(res => {
        console.log(res.data)
        this.menuList = res.data
      })
      // 评论列表
      this.$api.home.getRatingList(this.shopId, this.ratingOffset).then(res => {
        console.log(res.data)
        this.ratingList = res.data
      })
      // 商铺评论详情
      this.$api.home.ratingScores(this.shopId).then(res => {
        console.log(res.data)
        this.ratingScoresData = res.data
      })
      // 评论Tag列表
      this.$api.home.ratingTags(this.shopId).then(res => {
        console.log(res.data)
        this.ratingTagsList = res.data
      })
    },
    watchScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 当滚动超过 269 时，实现吸顶效果
      if (scrollTop > 269) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }
    },
    // 点击顶部4个筛选选项，展示不同的列表
    openPopups (type) {
      if (this.showPopups !== type) {
        this.showPopups = type
        this.open = true
      } else {
        // 再次点击相同选项时收回列表
        this.showPopups = ''
        this.open = false
      }
    },
    // 点击遮罩，全关闭
    closePopups () {
      this.showPopups = ''
      this.open = false
    }
  },
  watch: {
    // 商品、评论切换状态
    changeShowType (value) {}
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .top_bg
    width: 100%
    height: 2rem
    background-position: 50%
    background-size: cover
    background-repeat: no-repeat
    position: relative
    &:before
      content: ""
      position: absolute
      left: 0
      right: 0
      top: 0
      bottom: 0
      background-image: linear-gradient(0deg,hsla(0,0%,100%,0),rgba(0,0,0,.5))
  .back
    width: .24rem
    height: .24rem
    margin: .3rem 0 0 .3rem
    display: inline-block
    border-bottom: .03rem solid #fff
    border-left: .03rem solid #fff
    transform: rotate(45deg)
  .shop_info
    display: flex
    padding: .53rem 0 0
    position: relative
    display: flex
    flex-direction: column
    align-items: center
    background-color: #fff
    .shop_img
      width: 1.5rem
      height: 1.5rem
      position: absolute
      top: 0
      left: 50%
      margin: -1.2rem 0 0 -0.75rem
      img
        width: 100%
        height: 100%
        border-radius: .08rem
        box-shadow: 0 0 0.4vw 0 rgba(0,0,0,.2)
    .shop_top
      width: 5.4rem
      h2
        color: #333
        white-space: nowrap
        position: relative
        padding-right: .2rem
        display: flex
        align-items: center
        justify-content: center
        span
          font-size: .4rem
          font-weight: bold
          ellipsis()
        .iconfont
          font-size: .24rem
    .shop_attr
      font-size: .24rem
      text-align: center
      margin-top: .1rem
      span
        margin: 0 .05rem
    .shop_coupon
      width: 6rem
      margin: .15rem 0 0 0
      display: flex
      justify-content: center
      .coupon
        width: 2.88rem
        display: flex
        justify-content: space-between
        line-height: .48rem
        background: #fff4f4
        color: #5c1603
        position: relative
        &:before, &:after
          content: ""
          position: absolute
          right: .75rem
          width: .1rem
          height: .04rem
          background: #fff
          transform: translateX(50%)
        &:after
          bottom: .01rem
        .con
          flex: 1
          display: flex
          justify-content: center
          align-items: center
          .price
            font-size: .32rem
            font-weight: 600
            padding: 0 .2rem 0 .1rem
        .get
          width: .7rem
          text-align: center
    .shop_activity
      width: 6rem
      margin: .15rem 0 0 0
      display: flex
      align-items: center
      .activity_con
        flex: 1
        display: flex
        .activity_tags
          color: rgb(255, 75, 51)
          border: 1px solid rgb(255, 201, 193)
          margin: .05rem 0
          padding: .02rem .08rem
          transform: scale(0.8)
      .more_activity
        position: relative
        padding-right: .25rem
        color: #999
      .more_activity:after
        content: ""
        display: block
        border-style: solid
        border-width: .08rem .08rem 0
        border-color: #999 transparent transparent
        position: absolute
        top: 50%
        transform: translateY(-50%)
        right: 0
    .shop_notice
      width: 6rem
      margin: .15rem 0
      color: #999
      white-space: nowrap
      ellipsis()
  .shop_tab
    position: sticky
    &.isFixed
      top: -0.01rem
      left: 0
      right: 0
      z-index: 999
    ul
      line-height: .8rem
      display: flex
      background-color: #fff
      li
        position: relative
        flex: 1
        text-align: center
        font-size: .3rem
        color: #666
        border-bottom: 1px solid #f9f9f9
      li.active p
          display: inline-block
          position: relative
          color: #333
          font-weight: 700
          &:after
            content: ""
            position: absolute
            bottom: 0
            left: 0
            right: 0
            height: .03rem
            background-color: #2395ff
  .shop_brief_info
    position: fixed
    top: 50%
    left: 50%
    z-index: 10000
    width: 5rem
    min-height: 4rem
    margin: -3.5rem 0 0 -3rem
    display: flex
    justify-content: center
    align-items: center
    flex-direction: column
    padding: .5rem
    border-radius: .1rem
    background: #fff
    .con
      position: relative
      display: flex
      flex-direction: column
      .name
        font-size: .45rem
        line-height: .5rem
        color: #333
        text-align: center
        font-weight: bolder
      ul.brief_modal
        display: flex
        margin: .5rem -.6rem 0
        li
          display: flex
          flex: 1
          flex-direction: column
          text-align: center
          align-items: center
          h3
            font-size: .3rem
            font-weight: 600
            color: #333
            line-height: .26rem
            margin-bottom: .12rem
      .notice
        h3
          position: relative
          text-align: center
          margin: .36rem auto .2rem
          width: 1.52rem
          &:before
            content: ""
            width: 1.4rem
            height: .02rem
            position: absolute
            top: 50%
            left: 50%
            margin-left: -.7rem
            background-image: linear-gradient(90deg, #fff, #333 50%, #fff)
            opacity: .5
          span
            font-size: .24rem
            padding: 0 .08rem
            color: #999
            background-color: #fff
            position: relative
            z-index: 99
        .txt
          font-size: .26rem
          line-height: 1.54
          color: #333
          max-height: 2rem
          overflow-y: auto
      .close
        width: .6rem
        height: .6rem
        line-height: .65rem
        text-align: center
        color: #fff
        border: .01rem #fff solid
        border-radius: 100%
        background-size: 100%
        position: absolute
        left: 50%
        bottom: -1.8rem
        margin-left: -.3rem
  .coupon_popups
    padding: 0 .12rem
    position: fixed
    height: 50%
    bottom: 0
    right: 0
    left: 0
    opacity: 1
    background: #f5f5f5
    display: flex
    flex-direction: column
    z-index: 10000
    .title
      height: 1.7rem
      position: relative
      h3
        position: absolute
        z-index: 1
        padding-top: .3rem
        width: 100%
        text-align: center
        font-size: .32rem
        font-weight: 700
        color: #000
      .close
        position: absolute
        top: .25rem
        right: .25rem
        z-index: 13
        width: .5rem
        height: .5rem
        font-size: .5rem
    .con
      overflow-y : auto
      h4
        padding: 0 .16rem
        font-size: .24rem
        font-weight: 700
        color: #666
      dl
       padding-bottom: .3rem
      dd
        .coupon_item
          display: flex
          position: relative
          margin: .2rem auto 0
          padding-left: .3rem
          width: 7rem
          height: 1.9rem
          background: #fff
          border-radius: .02rem
          box-sizing: border-box
          border: .01rem solid #f5d9d5
          .coupon_left
            position: relative
            display: flex
            flex: 1
            padding-right: .2rem
            .price
              display: flex
              color: #ff5339
              justify-content: center
              align-items: center
              font-size: .64rem
              p
                display: flex
                align-items: flex-start
                font-weight: 700
                &:before
                  margin: .22rem .06rem 0
                  content: "\A5"
                  font-weight: 400
                  font-size: .3rem
                span
                  font-weight: 700
            .info
              display: flex
              flex-direction: column
              justify-content: center
              margin-left: .36rem
              word-wrap: break-word
              word-break: break-all
              h3
                font-size: .3rem
                color: #333
                font-weight: 700
              p
                font-size: .24rem
                color: #666
                margin-top: .14rem
          .coupon_right
            position: relative
            display: flex
            justify-content: center
            align-items: center
            flex: 0 0 1.76rem
            overflow: hidden
            .info
              display: flex
              flex-direction: column
              justify-content: center
              align-items: center
              font-size: .26rem
              .get_btn
                margin-top: .08rem
                display: inline-block
                width: 1.2rem
                height: .52rem
                color: #fff
                text-align: center
                line-height: .55rem
                border-radius: .52rem
                background: #ff5339
                border-top: .01rem solid transparent
                border-bottom: .01rem solid transparent
              img
                position: absolute
                width: 1.6rem
                height: auto
                top: 50%;
                right: 0;
                margin-top: -50%;
        .can_get
          &:before
            width: 1px
            height: 1.52rem
            content: ""
            position: absolute
            top: 50%
            right: 1.72rem
            transform: translateY(-50%)
            border-left: .01rem dashed #eec2b7
          .coupon_left
            &:before
            &:after
              content: ""
              position: absolute
              right: 0
              width: .2rem
              height: .1rem
              background: #f5f5f5
              transform: translateX(50%)
              z-index: 10
              border: .01rem solid #f5d9d5
              top: -1px
              border-top: none
              border-radius: 0 0 .2rem .2rem
            &:after
              top: auto
              bottom: -1px
              border-bottom: none
              border-radius: .2rem .2rem 0 0
  .activity_popups
    background: #fff
    height: auto
    .title
      height: 1rem
    .con
      padding: .0 .44rem .4rem
    .activity_list
      height: 4.2rem
      overflow-y: scroll
      .activity_item
        display: flex
        align-items: flex-start
        margin-bottom: .15rem
        .tag
          padding: .02rem .08rem
          font-size: .24rem
          border-radius: .02rem
          background-color: #fff
          color: rgb(255, 75, 51)
          border: 1px solid rgb(255, 201, 193)
          background: linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255))
          transform: scale(0.8)
        .txt
          margin-left: .1rem
          font-size: .24rem
          color: #666
          flex: 1
  .fade-choose-enter-active, .fade-choose-leave-active
      transition: opacity .5s
  .fade-choose-leave, .fade-choose-leave-active
      display: none
  .fade-choose-enter, .fade-choose-leave-active
      opacity: 0
  .mask
    position: fixed
    left: 0
    right: 0
    top: 0
    bottom: 0
    z-index: 9999
    background: rgba(0, 0, 0, .5)
  .showcover-enter-active,
  .showcover-leave-active
    transition: opacity 0.3s
  .showcover-enter,
  .showcover-leave-active
    opacity: 0
  .showbrief-enter-active,
  .showbrief-leave-active
    transition: transform 0.2s
  .showbrief-enter,
  .showbrief-leave-active
    transform: scale(.3)
  .toggle-cart-enter-active, .toggle-cart-leave-active
    transition: all .3s ease-out
  .toggle-cart-enter, .toggle-cart-leave-active
    transform: translateY(100%)
</style>
